<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p{
            color:red;
            margin-left:20px;
            display:inline-block;
        }
        .c{
            color:red;
            margin-left:4px;
            display:inline-block;
        }
        .l{
            font-size:18px;
        }
        .d{
            height:35px;
            width:300px;
            display:inline;
        }
        .i{
            height:30px;
            width:300px;
            border-radius:8px;
        }
        .w{
            padding-left: 30px;
            /*background-color: #c2c2c2;*/
            background-color: rgba(96, 96, 96, 0.5);
            position: absolute;
            margin: auto;
            top:0;
            left:0;
            bottom:0;
            right: 0;
            font-family: 微软雅黑;
            font-weight:500;
            border:2px solid #505050;
            border-radius:25px;
        }
        .dizhi{
            border-radius:8px;
        }
        .zhucexinyonghu{
            padding-left:30%;
            color: #000000;
            font-family: 楷体;
            font-weight:600;
            font-size: 50px;
        }
        .keyong{
            color : lawngreen;
        }
        .bukeyong{
            color: red;
        }
        select{
            height: 30px;
            width: 75px;
        }
        body {
            margin: 0;
            padding: 0;
            background-size:100%;
        }
    </style>
    <script src="/resources/resources/scripts/jquery-1.7.1.min.js" type="application/javascript"></script>
</head>
<script>
    var UserAccount = new Array();
    $(function () {
        //查询全部省
        $.getJSON("/selectProvince",{},function (data) {
            $("#sheng").empty();
            var sheng='<option value="">请选择</option>';
            for(var i=0;i<data.length;i++){
                var shen=data[i];
                sheng+='<option value="'+shen.code+'">'+shen.name+'</option>';
            }
            $("#sheng").append(sheng);
        })

        $.getJSON("/selectUserAccount",{},function (data) {
            for(var i = 0 ;i < data.length;i++){
                var s = data[i];
                UserAccount.push(s.userAccount);
            }
        })

        //验证事件
        checkAll()


    })
    function checkAll() {
        //手机号
        $("input[name='userPhone']").blur(function() {
            checkText($("input[name='userPhone']"),/^1[3456789]\d{9}$/,"请输入您的手机号","手机号格式有误");
            if($("input[name='userPhone']").val()==null||$("input[name='userPhone']").val()==""){
                dom.siblings().text(tip);
                dom.siblings().css("color","red");
                return false;
            }else if(!(/^1[3456789]\d{9}$/.test($("input[name='userPhone']").val())||/^((\d{3,4})|\d{3,4}-|\s)?\d{7,14}$/.test($("input[name='userPhone']").val()))){
                $("input[name='userPhone']").siblings().text(tip2);
                $("input[name='userPhone']").siblings().css("color","red");
                return false;
            }
            $("input[name='userPhone']").siblings().text("");
            return true;
        });
        //账号
        $("input[name='userAccount']").blur(function() {
            checkText($("input[name='userAccount']"),/^[0-9]{4,16}$/,"请输入您的账号","格式为4-16位数字");
        });
        //密码
        $("input[name='userPasswrod']").blur(function() {
            checkText($("input[name='userPasswrod']"),/^[0-9]{4,16}$/,"请输入您的密码","格式为4-16位数字");
        });
    }
    //检查文本
    function checkText(dom,reg,tip,tip2) {
        if(dom.val()==null||dom.val()==""){
            dom.siblings().text(tip);
            dom.siblings().css("color","red");
            return false;
        }else if(!(reg.test(dom.val()))){
            dom.siblings().text(tip2);
            dom.siblings().css("color","red");
            return false;
        }
        dom.siblings().text("");
        return true;
    }    

    //根据省编号查市
    function selectCity() {
        selectCounty();
        selectTownship();
        var code=$("#sheng").val();
        $.getJSON("/selectCity",{"code":code},function (data) {
            $("#shi").empty();
            var city='<option value="">请选择</option>';
            for(var i=0;i<data.length;i++){
                var c=data[i];
                city+='<option value="'+c.code+'">'+c.name+'</option>';
            }
            $("#shi").append(city);
        })
    }
    //根据市编号查县
    function selectCounty() {
        var code=$("#shi").val();
        $.getJSON("/selectCounty",{"code":code},function (data) {
            $("#xian").empty();
            var county='<option value="">请选择</option>';
            for(var i=0;i<data.length;i++){
                var c=data[i];
                county += '<option value="'+c.code+'">'+c.name+'</option>';
            }
            $("#xian").append(county);
        })
    }
    //根据县编号查镇
    function selectTownship() {
        var code=$("#xian").val();
        $.getJSON("/selectTownship",{"code":code},function (data) {
            $("#zhen").empty();
            var zhen='<option value="">请选择</option>';
            for(var i=0;i<data.length;i++){
                var c=data[i];
                zhen += '<option value="'+c.code+'">'+c.name+'</option>';
            }
            $("#zhen").append(zhen);
        })
    }

    //注册用户信息
    function insertUser() {
        var fromdata = $("#form2").serialize();
        console.log(fromdata);
        if($("input[name='userPhone']").siblings().text()!=""||$("input[name='userAccount']").siblings().text()!=""||
            $("input[name='userPasswrod']").siblings().text()!=""){
            alert("请完善信息")
            return;
        }
        if($("select[name='userProvince']").val() == null || $("select[name='userProvince']").val() == "" || $("select[nmae='userProvince']").val() == "请选择" ){
            alert("请选择您的户籍省！")
            return;
        }
        if($("select[name='userCity']").val() == null || $("select[name='userCity']").val() == "" || $("select[nmae='userCity']").val() == "请选择" ){
            alert("请选择您的户籍市！")
            return;
        }
        if($("select[name='userCounty']").val() == null || $("select[name='userCounty']").val() == "" || $("select[nmae='userCounty']").val() == "请选择" ){
            alert("请选择您的户籍县！")
            return;
        }
        if($("select[name='userTown']").val() == null || $("select[name='userTown']").val() == "" || $("select[nmae='userTown']").val() == "请选择" ){
            alert("请选择您的户籍镇！")
            return;
        }
        if($("select[name='accountGrade']").val() == null || $("select[name='accountGrade']").val() == ""|| $("select[nmae='accountGrade']").val() == "请选择" ){
            alert("请选择您所注册账号的权限！")
            return;
        }
        if($(".agree").prop("checked") == false){
            alert("尊敬的用户，您需要详细的阅读并勾选同意《注册账户服务协议》才能进行注册账号！")
            return;
        }
        for(var i = 0;i < UserAccount.length;i++){
            if($("input[name='userAccount']").val() == UserAccount[i]){
                alert("您的账号已存在，请重新输入！")
                return;
            }
        }
        $.ajax({
            url:"/insertUser",
            data:fromdata,
            type:"post",
            dataType:"json",
            success:function (data) {
                location.href="../resources/shenhe.html";
            }
        })

    }
</script>
<body style="background-image:url(images/zhucexinxitupian/jinghui.jpg)">

<form  id="form2" enctype="multipart/form-data" method="post" accept-charset="utf-8" >

     <div class="w" style="width:560px;height:500px;/*float:left;margin:0 20px;*/">
         <br/>
         <div style="font-size:38px;" class="zhucexinyonghu">注册新用户</div>
        <br/>
        <span class="p">&nbsp;&nbsp;&nbsp;&nbsp;*</span>
        <label for="phonenumber" class="l">手机号:</label>
        <div  class="d">
            <input id="phonenumber" type="text" class="i" name="userPhone">
            <span></span>
        </div>
        <br/><br/>
        <span class="c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span>
        <label for="login_password" class="l">账号:</label>
        <div  class="d">
            <input id="login_password" type="text" class="i" name="userAccount">
            <span></span>
        </div>
        <br/><br/>
        <span class="c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span>
        <label for="confirm_password" class="l">密码:</label>
        <div  class="d">
            <input id="confirm_password" type="text" class="i" name="userPasswrod">
            <span></span>
        </div>
        <br/><br/>
        <span class="p">*</span>
        <label class="l">地址:</label>
        <div  class="d">
            <select id="sheng" onclick="selectCity()" name="userProvince" class="dizhi">
                <option value="">请选择</option>
            </select>
            <span>省</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <select id="shi" onclick="selectCounty()" name="userCity" class="dizhi">
                <option value="">请选择</option>
            </select>
            <span>市</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <select id="xian" name="userCounty"  onclick="selectTownship()"class="dizhi" >
                <option value="">请选择</option>
            </select>
            <span>县</span>
            <select id="zhen" name="userTown" class="dizhi">
                <option value="">请选择</option>
            </select>
            <span>镇</span>
            <br/><br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label  class="l">注册权限:</label>
            <select name="accountGrade" class="dizhi">
                <option value="">请选择</option>
                <option value=0>平民</option>
                <option value=1>地区派出所</option>
                <option value=2>分局</option>
                <option value=3>市局</option>
            </select>
        </div>
        <br/><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="checkbox" class="agree" name="agree" style="margin-left:100px;display:inline-block;" value="1" class="dizhi"/>
        <span style="font-size:15px;">我已阅读并同意<a href="*">《用户注册协议》</a></span>
        <br/><br/>
        <input type="button" onclick="insertUser()" value="同意以上协议并注册" style="margin-left:100px;height:30px;width:300px;background-color:red;display:inline-block;" class="dizhi"/>
     </div>
</form>
</body>
</html>
